<template>
  <div class="p-4">
    <Card class="layout-card" title="问卷详情">
      <Descriptions bordered :column="3" size="small">
        <DescriptionsItem label="问卷标题">
          {{ welfare.name }}
        </DescriptionsItem>
        <DescriptionsItem label="问卷描述">
          {{ welfare.type }}
        </DescriptionsItem>
        <DescriptionsItem label="截至日期">
          {{ welfare.time }}
        </DescriptionsItem>
        <DescriptionsItem label="问卷状态">
          {{ welfare.status }}
        </DescriptionsItem>
      </Descriptions>
    </Card>

    <!-- <Card class="layout-card" title="问题列表">
      <Page auto-content-height> <Grid /></Page>
    </Card> -->
    <Card class="layout-card mt-4">
      <Button @click="$router.go(-1)"> 返回 </Button>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
// import type { VxeGridProps } from '#/adapter/vxe-table';
import { Descriptions, Card, Button, DescriptionsItem } from 'ant-design-vue';
// import { useVbenVxeGrid } from '#/adapter/vxe-table';

interface RowType {
  color: string;
  id: string;
  price: string;
  status: string;
  title: string;
  type: string;
  time: string;
  deadline: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'category',
      label: 'ID',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '日期',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '问卷类别',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '问卷标题',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

// const gridOptions: VxeGridProps<RowType> = {
//   checkboxConfig: {
//     highlight: true,
//     labelField: 'name',
//   },
//   columns: [
//     { field: 'id', title: '问卷ID' },
//     { field: 'title', title: '问卷标题' },
//     { field: 'type', title: '问卷类别' },
//     { field: 'time', title: '发布日期' },
//     { field: 'deadline', title: '截至日期' },
//     { field: 'status', title: '问卷状态' },
//   ],
//   height: 'auto',
//   keepSource: false,
//   pagerConfig: {},
//   data: [
//     {
//       id: '1',
//       title: '协会瑜伽体验课体验',
//       type: '协会问卷',
//       time: '10月21日', // 时间格式
//       deadline: '10月28日',
//       status: '已结束',
//     },
//     {
//       id: '2',
//       title: '工会秋季登山问卷',
//       type: '工会问卷',
//       time: '11月15日 ',
//       deadline: '11月22日',
//       status: '进行中',
//     },
//   ],
// };

// const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });

const welfare = {
  name: '协会瑜伽体验课',
  type: '协会问卷',
  time: '10月20日 下午3:00-5:00',
  address: '健康中心',
  desc: '免费体验瑜伽课程，让你体验到瑜伽的魅力',
  process: '报名-签到-体验-评价-结业',
  status: '已满员',
  number: '30',
};
</script>
